<template>
	<div>
		<div class="section-panel">
			<div>
				<el-button type="primary" icon="el-icon-plus">添加角色</el-button>
			</div>
		</div>
		<div class="section-panel mt10">
			<div style="height:calc(100vh - 160px); padding-bottom:40px; box-sizing: border-box">
				<el-table :data="tableData" height="100%">
					<el-table-column type="selection" width="80px" align="center"></el-table-column>
					<el-table-column type="index" width="80px" label="ID"></el-table-column>
					<el-table-column label="角色名称" prop="groupname" width="150px"></el-table-column>
					<el-table-column label="角色描述" prop="desc"></el-table-column>
					<el-table-column label="状态" prop="status">
						<template v-slot="scope">
							<div v-if="scope.row.enable==1" style="display: flex; align-content: center; justify-items: center;"> 
								<div style="margin-top:5px;width:10px; background-color: #00aa00;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#00aa00;">启用</div>
							</div>
							<div v-if="scope.row.enable==0" style="display: flex; align-content: center; justify-items: center;">
								<div style="margin-top:5px;width:10px; background-color: #ff5500;border-radius: 10px;height:10px;"></div>
								<div style="margin-left: 2px; color:#ff5500;">禁用</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px" align="center">
						<template v-slot="scope">
							<el-button-group>
								<el-button icon="el-icon-edit-outline" type="primary">编辑</el-button>
								<el-button icon="el-icon-delete" type="danger">删除</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<div class="flex" style="line-height: 40px;">
					<div class="flex1">
						
					</div>
					<div style="color: #888;">
						共{{tableData.length}}条记录
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import http from '@/utils/http';
	export default {
		data() {
			return {
				tableData: []
			}
		},
		mounted() {
			this.loadDataList();
		},
		methods:{
			loadDataList(){
				const params = {
					nickname:''
				}
				http.post("/api/admin/authgroup/list_by_page", params).then(res => {
					if (res.status == 200 && res.data.code) {
						this.tableData=res.data.list;
					}
				}).catch(error => {})
			},
		}
	}
</script>

<style>

</style>